/**
 *  @name RaderChart
 * @desc 雷达图
 * */
import React, { Component } from "react"
import echarts from "echarts/lib/echarts"
// 引入柱状图
import "echarts/lib/chart/radar"
// 引入提示框和标题组件
import "echarts/lib/component/tooltip"
import "echarts/lib/component/title"

class RaderChart extends Component {
  state = { buffer: [], froms: [], nowId: "" }
  myChart = null

  componentDidMount() {
    this.init()
  }

  componentDidUpdate() {
    const { buffer = [], froms = [], nowId = "" } = this.state
    const { data = [], list = [], ids = "" } = this.props
    const _buffer = JSON.stringify(buffer)
    const _froms = JSON.stringify(froms)
    const _data = JSON.stringify(data)
    const _list = JSON.stringify(list)
    if (nowId !== ids) {
      this.init()
      this.setState({ buffer: data, froms: list, nowId: ids })
    }
  }

  init = () => {
    const { ids } = this.props
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById(ids))
    this.updateData()

    this.myChart.resize()
  }
  updateData = () => {
    const { data, list } = this.props
    // 绘制图表
    this.myChart.setOption({
      color: ["rgb(121, 198, 207)"],
      tooltip: {
        trigger: "axis"
      },
      radar: [
        {},
        {
          indicator: (function() {
            let res = []
            if (list.length > 0) {
              for (let i = 0; i < list.length; i++) {
                res.push({ text: `${list[i].tex + " (" + list[i].num + ")"}`, max: 100 })
              }
            } else {
              res = list
            }
            return res
          })(),
          name: {
            formatter: "{value}",
            textStyle: {
              color: "#666",
              fontSize: 15
            }
          },
          nameGap: 35,
          shape: "circle",
          center: ["50%", "50%"],
          radius: 70,
          splitArea: {
            areaStyle: {
              color: ["rgb(231, 238, 249)"],
              shadowColor: "rgba(0, 0, 0, 0.3)"
            }
          },
          axisLine: {
            lineStyle: {
              color: "rgba(147, 106, 108, 0.1)"
            }
          },
          splitLine: {
            lineStyle: {
              color: "rgba(147, 106, 108, 0.1)"
            }
          }
        }
      ],
      series: [
        {
          name: "能力诊断",
          type: "radar",
          tooltip: {
            trigger: "item"
          },
          radarIndex: 1,
          symbolSize: 10,
          itemStyle: {
            normal: {
              color: "rgb(91, 155, 252)", // 图表中各个图区域的边框线拐点颜色
              areaStyle: {
                type: "default"
              }
            }
          },
          data: [
            {
              value: data,
              name: "能力诊断： %",
              /**展示value */
              // label: {
              //   show: true,
              //   formatter: function(params) {
              //     return params.value + '%'
              //   },
              //   color: '#333',
              //   fontSize: 14,
              // },

              areaStyle: {
                opacity: 0.4,
                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                  {
                    color: "#B8D3E4",
                    offset: 0
                  },
                  {
                    color: "#72ACD1",
                    offset: 1
                  }
                ])
              }
            }
          ]
        }
      ]
    })
  }
  render() {
    const { ids } = this.props
    return (
      <div style={{ height: "100%" }}>
        <div id={ids} style={{ position: "relative", width: "100%", height: "100%" }}></div>
      </div>
    )
  }
}
export default RaderChart
